<template>
	<view class="page">
		<cu-custom  bgColor="bg-white" :isBack="true"><block slot="content">确认订单</block></cu-custom>
		<scroll-view scroll-y="true">
			<view class="flex margin-right-sm margin-top align-center">
				<text class="cuIcon-titles text-theme" style="font-size: 40rpx;"></text>
				<text class="text-df">收货地址</text>
			</view>
			<view class="bg-white radius12 overHidden  margin-top-sm  margin-left-sm margin-right-sm padding padding-top-sm padding-bottom-sm">
				<input type="text" v-model="nickname" placeholder="请填写收货人姓名" />
			</view>
			<view class="bg-white radius12 overHidden  margin-top-sm  margin-left-sm margin-right-sm padding padding-top-sm padding-bottom-sm">
				<input type="text" v-model="mobile" placeholder="请填写收货人电话" />
			</view>
			<view class="bg-white radius12 overHidden  margin-top-sm  margin-left-sm margin-right-sm padding padding-top-sm padding-bottom-sm">
				<view class="input" @click="btnClick">
					<view v-if="!province" style="color:#888">
						请选择所在地区
					</view>
					<text v-model="region" v-else>
						{{province || ''}}{{city || ''}}{{county || ''}}{{town|| ''}}
					</text>
				</view>
			</view>
			<view class="bg-white radius12 overHidden  margin-top-sm  margin-left-sm margin-right-sm padding padding-top-sm padding-bottom-sm">
				<input type="text" v-model="address" placeholder="请填写收货人详情地址" />
			</view>
			<view class="flex margin-right-sm margin-top align-center">
				<text class="cuIcon-titles text-theme" style="font-size: 40rpx;"></text>
				<text class="text-df">应付金额</text>
			</view>
			<view class="bg-white radius12 overHidden margin-top-sm margin-left-sm margin-right-sm padding padding-top-sm padding-bottom-sm" v-if="activity">
				<view class="flex justify-between">
					<text class="text-df text-fw600 text-333" v-if="activity.active_title">{{activity.active_title}} x1 </text>
					<text class="text-df text-fw600 text-theme" v-if="activity.active_price">￥{{activity.active_price | formatPrice}}</text>
				</view>
				<view class="flex margin-top-sm">
					<text class="text-theme text-sm">赠:</text>
					<view class="margin-left-sm text-sm text-999" style="display: flex;flex-direction: column;min-height:80rpx;">
						<!-- <text class="tips"> X {{item.key}} </text> -->
						<!-- <view class="flex" v-for="(item,index) in activity.giftDesc" :key="index">
							<text class="tips margin-right-sm">{{item.value}}</text>
						</view> -->
						<view class="tips" v-html="checkGiftDesc(activity.gift_desc)"></view>
					</view>
				</view>
			</view>
			<view class="flex margin-right-sm margin-top align-center">
				<text class="cuIcon-titles text-theme" style="font-size: 40rpx;"></text>
				<text class="text-df">选择支付方式</text>
			</view>
			<view class="bg-white radius12 overHidden  margin-top-sm  margin-left-sm margin-right-sm padding padding-top-sm padding-bottom-sm">
				<view class="flex justify-between align-center flex-sub">
					<view class="flex align-center">
						<image src="../../../static/images/icon_wechat.png" style="width:60rpx; height: 60rpx;" mode="aspectFit"></image>
						<text class="margin-left-sm">微信</text>
					</view>
					<view class="cicle-box flex align-center justify-center">
						<view class="cicle-item"></view>
					</view>
				</view>
			</view>
			<view class="cu-modal" :class="modalName=='comfirmTips'?'show':''" @tap="hideModal">
				<view class="cu-dialog margin bg-white">
					<view class="bg-white closeIcon"  @tap="hideModal">X</view>
					<view class="bg-white flex justify-center margin">
						<view class="bg-white flex justify-center align-center">
							<view class="text-lg text-333 text-fw500">支付成功</view>
						</view>
					</view>
					<view class="bg-white flex justify-center margin-bottom">
						<view class="flex justify-center" style="width: 80%;text-align: left;">
							<text class="text-df" style="line-height: 40rpx; color: #666;">你的醉黔游氿友卡已购买成功，工作成员会在48小时之内为您寄送赠品，旅游服务及链氿会员折扣请下载链氿APP领取！</text>
						</view>
					</view>
					<view class="cu-bar bg-white flex justify-center" style="border-top: 1px solid #E1E1E1;">
						<view class="flex justify-between margin" style="width: 80%; padding:10rpx 0; border-radius: 10rpx;">
							<text class="text-333 text-sm text-bold" @tap="checkDetail(order_sn)">查看详情</text>
							<text class="text-sm text-bold" style="color:#C71717;" @tap="downLoadApp">去APP领取旅游服务</text>
						</view>
					</view>
				</view>
			</view>
			<view class="cu-modal" :class="modalName=='DownLoadTip'?'show':''" @tap="hideModal">
				<view class="cu-dialog margin bg-white">
					<view class="bg-white closeIcon"  @tap="hideModal">X</view>
					<view class="bg-white flex justify-center margin">
						<view class="bg-white flex justify-center align-center">
							<view class="text-lg text-333 text-fw500">App下载提示</view>
						</view>
					</view>
					<view class="bg-white flex justify-center margin-bottom">
						<view class="flex flex-direction justify-center" style="width: 86%;text-align: left;">
							<text class="text-df" style="line-height: 40rpx; color: #666;">您好！请复制链接到浏览器打开，下载链氿APP领取旅游服务及会员权益！下载链接 :</text>
							<text class="text-df" style="line-height: 40rpx; color: #666;">{{link}}</text>
						</view>
					</view>
					<view class="cu-bar bg-white flex justify-center" style="border-top: 1px solid #E1E1E1; border-bottom-left-radius: 10rpx; border-top-right-radius: 10rpx;">
						<view class="flex justify-between margin" style="width: 80%; padding:10rpx 0; border-radius: 10rpx;">
							<text class="text-333 text-sm text-bold">下次再说</text>
							<text class="text-sm text-bold" style="color:#C71717;" @tap="copyBtn(link)">去复制链接</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<selectAddress style="zIndex:9999;" ref='selectAddress' @selectAddress="successSelectAddress"></selectAddress>
		<view class="cu-bar padding bg-white" style="position: fixed; bottom:0; width: 100%;" @tap="confrimOrder">
			<view class="content text-theme text-df text-fw500" style="letter-spacing:8rpx;">确认并支付</view>
		</view>
	</view>
</template>
<script>
	import selectAddress from '@/components/yixuan-selectAddress/yixuan-selectAddress.vue'
	import * as Tour_API from '@/api/tour.js' 
	import * as activity_API from '@/api/tour.js'
	import * as RegExp from '@/utils/RegExp.js'
	export default {
		components:{
			selectAddress
		},
		data() {
			return {
				izmodal:false,
				active_id:null,
				nickname:'',
				mobile:'',
				region:{},
				province:'',
				city:'',
				county:'',
				town:'',
				address:'',
				province_id:'',
				city_id:'',
				county_id:'',
				town_id:'',
				last_reogin_id:'',
				activity:{},
				order_sn:null,
				izShowApp:false,
				modalName:null,
				link:'https://app.chinalianjiu.com',
			};
		},
		onLoad(e) {
			if(e.active_id){
				this.active_id = parseInt(e.active_id)
			}
		},
		onShow() {
			this.getactivityDetail()
		},
		onBackPress() {
			uni.removeStorageSync('activityOrder')
		},
		beforeDestroy() {
			uni.removeStorageSync('activityOrder')
		},
		methods:{
			getactivityDetail(){
				if(this.active_id){
					activity_API.getTourDetail(this.active_id).then(res =>{
						this.activity = res
					}).catch(()=>{
						uni.showLoading({
							title:'查询商品详情失败'
						})
						// uni.navigateBack({
						// 	delta:1
						// }) 
					})
				}
			},
			checkGiftDesc(gift_desc){
				if(gift_desc){
					let gDesc = JSON.parse(gift_desc)
					let descList = []
					if(gDesc.length>0){
						gDesc.map((key,index) =>{
							if(key.key == index+1){
								descList.push(key.value)
							}
						})
						let Str = descList.join('\n')
						Str = Str.replace(/\n/g,"<br/>")
						return Str
					}
				}
			},
			hideModal() {
				this.modalName = null
			},
			checkDetail(){
				if(this.order_sn){
					uni.navigateTo({
						url:'./orderDetail?sn='+this.order_sn
					})	
				}
			},
			downLoadApp(){
				let that = this
				that.hideModal()
				setTimeout(()=>{
					this.modalName = 'DownLoadTip'
				},500)
			},
			copyBtn(e) {
				let that = this
			    uni.setClipboardData({
			     //准备复制的数据
			      data: e,
			      success:(res)=>{
			        uni.showToast({
						icon:'none',
						title: '已成功复制,请到浏览器打开链接',
						duration:3000
			        });
			      },
				  complete() {
				  	that.hideModal()
				  }
			    })
			},
			btnClick() {
			    this.$refs.selectAddress.show()
			},
			successSelectAddress(address){ //选择成功回调
				this.region=[]
				this.town = ''
				this.town_id = null
				address.map((item,index) =>{
					if(item.local_name){
						this.region.push(item)
						this.last_reogin_id = item.id
					}
					if(item.region_grade === 1){
						this.province = item.local_name
						this.province_id = item.id
					}else if(item.region_grade === 2){
						this.city = item.local_name
						this.city_id = item.id
					}else if(item.region_grade === 3){
						this.county = item.local_name
						this.county_id = item.id
					}else if(item.region_grade === 4){
						this.town = item.local_name
						this.town_id = item.id
					}
				})
			},
			confrimOrder(){
				if(!RegExp.RealName.test(this.nickname)){
					uni.showToast({title:'请输入正确的收货人姓名',icon:'none'});
					return ;
				}
				if(!this.mobile){
					uni.showToast({title:'请输入收件人电话号码',icon:'none'});
					return ;
				}
				if(!RegExp.mobile.test(this.mobile)){
					uni.showToast({title: '请填写正确的手机号码',icon:"none"});
					return false; 
				} 
				if(!this.province || !this.city){
					uni.showToast({title:'请选择地区',icon:'none'});
					return
				}
				if(!RegExp.Address.test(this.address)){
					uni.showToast({title:'请输入正确的收件人详细地址',icon:'none'});
					return 
				}
				uni.showLoading({
					title:'正在提交'
				})
				let params = {
					active_id:this.active_id,
					ship_name:this.nickname,
					ship_addr:this.address,
					ship_tel:this.mobile,
					ship_region :this.last_reogin_id
				}
				activity_API.makeTourOrder(params).then(res =>{
					console.log(res)
					if(res.order_sn){
						let sn = res.order_sn
						this.order_sn = res.order_sn
						let paramsOrder = {
							payment_plugin_id:'weixinPayPlugin',
							pay_mode:"normal",
							client_type:'MINI',
						}
						activity_API.payActivity(sn,paramsOrder).then(res =>{
							let nonceStr=res.res.nonceStr
							let	timeStamp=res.res.timeStamp
							let	_package=res.res.package
							let	paySign=res.res.paySign
							let signType=res.res.signType
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: timeStamp,
								nonceStr:nonceStr,
								package: _package,
								signType: signType,
								paySign: paySign,
								success: res=> {
									console.log('支付返回',res)
									uni.showToast({
										title: "支付成功",
										duration: 2000,
										icon: 'none'
									});
									// this.izmodal = true
									this.modalName = 'comfirmTips'
								},
								fail: err=> {
									if(err.errMsg === 'requestPayment:fail cancel'){
										uni.showToast({
											title: "已取消支付",
											icon: 'none'
										});
									}else{
										uni.showModal({
											content: "支付失败,原因为:\n " + err.errMsg,
											showCancel: false,
										})
									}
								}
							});			
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
/deep/.cu-dialog {
	overflow: visible;
}
.closeIcon{
	position: absolute;
	right: 0;
	top: -70rpx;
	width: 50rpx;
	height: 50rpx;
	background:rgba(255,255,255,0.4);
	border-radius: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	font-size: 30rpx;
}
.tips{
	line-height: 36rpx;;
},
.cicle-box{
	width: 36rpx;
	height: 36rpx;
	border-radius: 100%;
	overflow: hidden;
	border: 2rpx solid #3DA83A;
	.cicle-item{
		width: 20rpx;
		height: 20rpx;
		border-radius: 100%;
		overflow: hidden;
		background-color: #3DA83A;
	}
}
</style>
